import './App.css';
import React, { Component, lazy, Suspense } from 'react';

import { Route, BrowserRouter, Redirect, Switch } from 'react-router-dom';
import Loading from './components/Loading';

var Index = lazy(() => import('./views/Index'))
var Login = lazy(() =>import('./views/Login'))
var Register = lazy(() =>import('./views/Register'))
var Search = lazy(() =>import('./views/Search'))
var NotFound = lazy(() => import('./views/NotFound'))
var SearchPage = lazy(() => import('./views/SearchPage'))
var Detail = lazy(() =>import('./views/Detail'))
var Collection = lazy(() =>import('./views/Collection'))

//react中创建组件的方式:
//方式一:函数式组件,内部没有this
// function App() {
//   // console.log(this);//undefine,所以无需研究this
//   return (
//     <div className="App">
//       <h1 className="title">demo</h1>
//     </div>
//   );
// }

// export default App;


//方式二:class组件,必须继承自React.Component
//class组件内部的this表示当前组件实例对象
//有组件状态,有生命周期函数
class App extends React.Component{
  render() {//负责组件的渲染(只要当前组件渲染一次,render方法必定会调用一次)
    return (
      <div className="App">
        <Suspense fallback={<div className='loading'><Loading/> </div>}>
          <Switch>
            <Route path='/index' component={Index} />
            <Route exact path='/login' component={Login} />
            <Route exact path='/register' component={Register} />
            <Route exact path='/searchPage' component={SearchPage} />
            {/* <Route exact path="/search/:id" component={Search} />    */}
            <Route exact path='/search' component={Search} />
            <Route exact path='/detail/:id' component={Detail} />
            <Route exact path='/collection' component={Collection} />
            <Redirect exact from='/' to='/index/home' />
            <Route path='*' component={NotFound} />
          </Switch>
        </Suspense>
      </div>
    );
  }
}

export default App;


//方式三:React.creatClass()

// React.creatClass()